<template>
  <section>
    <el-form-item label="数据对象" required>
      <el-select remote v-model="value.tablename" filterable placeholder="请选择" :style="{width: '100%'}" @change="control_changeTable">
        <el-option-group>
          <el-option v-for="item in sr.tables" :key="item.tablename" :label="item.name + ' - ' + item.tablename"
            :value="item.tablename"></el-option>
        </el-option-group>
      </el-select>
    </el-form-item>

    <el-form-item label="显示字段" v-if="value.tablename" required>
      <el-select remote v-model="value.showfields" filterable placeholder="请选择" :style="{width: '100%'}" multiple>
        <el-option-group>
          <el-option v-for="item in sr.fields" :key="item.name" :label="item.name + ' - ' + item.comment"
            :value="item.name">
            {{item.name}} - {{item.comment}}
          </el-option>
        </el-option-group>
      </el-select>
    </el-form-item>

    <el-form-item label="查询过滤字段" v-if="value.tablename" required>
      <el-select v-model="value.filterfields" filterable placeholder="请选择" :style="{width: '100%'}" multiple>
        <el-option-group>
          <el-option v-for="item in sr.fields" :key="item.name" :label="item.name + ' - ' + item.comment"
            :value="item.name">
            {{item.name}} - {{item.comment}}
          </el-option>
        </el-option-group>
      </el-select>
    </el-form-item>

  </section>

</template>

<script>
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';
  export default {
    props: {
      value: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        sp: {},
        sr: {
          tables: [],
          fields: [],
        },
        param: {}
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;

        let url = xcflowGenerateRequestUrl(this, "queryDataTables");
        let method = 'get';
        that.$axios({
          method,
          url
        }).then(resp => {
          that.sr.tables = resp.data.data.list;
        });

        if(that.value.tablename!=null && that.value.tablename!=""){
            that._loadData(that.value.tablename);
        }
      },
      control_changeTable(tablename) {
        let that = this;
        that._loadData(tablename);

        that.value.showfields = [];
        that.value.filterfields = [];

      },
      _loadData(tablename){
        let that = this;
        let url = xcflowGenerateRequestUrl(this, "queryFieldsByTableName?tablename=" + tablename);
        let method = 'get';
        that.$axios({
          method,
          url
        }).then(resp => {
          that.sr.fields = resp.data.data.list;
        });
      }

    }
  }
</script>

<style>

</style>
